<template>
  <div class="list-item" :class="{ selected }" @click="$emit('goDetail', mail.id)">
    <input
      type="checkbox"
      :checked="selected"
      @change.stop="$emit('toggle', mail.id)"
      @click.stop
      class="big-checkbox"
    />
    <span class="subject">{{ mail.subject }}</span>
    <span class="sender">{{ mail.receiver }}</span>
    <span class="date">{{ mail.received_at }}</span>
    <span class="status">
      <span class="unread">草稿</span>
    </span>
  </div>
</template>
<script setup lang="ts">
defineProps<{
  mail: any
  selected: boolean
}>()
</script>
<style scoped>
.list-item {
  display: flex;
  align-items: center;
  padding: 12px 24px;
  border-bottom: 1px solid #eee;
  transition: background 0.2s;
  width: 100%;
  box-sizing: border-box;
}
.list-item.selected {
  background: #e6f7ff;
}
.subject {
  display: inline-block;
  width: 320px;
  padding-right: 12px;
}
.sender {
  display: inline-block;
  width: 300px;
  padding-right: 12px;
}
.date {
  display: inline-block;
  width: 300px;
  padding-right: 12px;
}
.status {
  display: inline-block;
  width: 300px;
}
.unread {
  color: #f56c6c;
}
.list-item:hover {
  background: #f9e9e7;
  cursor: pointer;
}
.big-checkbox {
  width: 22px;
  height: 22px;
  accent-color: #409eff;
  margin-right: 18px;
  cursor: pointer;
}
</style>
